Mobile Development with Ionic and Vue — Pull to Refresh, Reorder, and Search Bars

If we know how to create Vue web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with Vue.

Pull to Refresh

We can add a pull to refresh component with the ion-refresher component.

For example, we can write:

<template>
  <ion-content>
    <ion-refresher slot="fixed" pull-factor="0.5" pull-min="100" pull-max="200">
      <ion-refresher-content></ion-refresher-content>
    </ion-refresher>
  </ion-content>
  <ion-content>
    <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
      <ion-refresher-content
        :pulling-icon="chevronDownCircleOutline"
        pulling-text="Pull to refresh"
        refreshing-spinner="circles"
        refreshing-text="Refreshing..."
      >
      </ion-refresher-content>
    </ion-refresher>
  </ion-content>
</template>

<script lang="ts">
import { IonContent, IonRefresher, IonRefresherContent } from "@ionic/vue";
import { chevronDownCircleOutline } from "ionicons/icons";
import { defineComponent } from "vue";

interface CustomEvent {
  target: {
    complete: Function;
  };
}

export default defineComponent({
  components: { IonContent, IonRefresher, IonRefresherContent },
  setup() {
    const doRefresh = (event: CustomEvent) => {
      console.log("Begin");
      setTimeout(() => {
        console.log("End");
        event.target.complete();
      }, 2000);
    };
    return { chevronDownCircleOutline, doRefresh };
  },
});
</script>

The pulling-icon shows the icon.

pulling-text has the refresh indicator text.

refreshing-spinner sets the spinner type.

refreshing-text sets the text for the spinner.

ion-refresher-content has the content that we want to refresh with the pull to refresh feature.

Reorder

We can add reorderable items with the ion-reorder component.

For example, we can write:

<template>
  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
  <ion-reorder-group :disabled="false">
    <ion-item>
      <ion-label> Item 1 </ion-label>
      <ion-reorder slot="end">
        <ion-icon name="pizza"></ion-icon>
      </ion-reorder>
    </ion-item>
    <ion-item>
      <ion-label> Item 2 </ion-label>
      <ion-reorder slot="end">
        <ion-icon name="pizza"></ion-icon>
      </ion-reorder>
    </ion-item>
    <ion-reorder>
      <ion-item>
        <ion-label> Item 3 </ion-label>
      </ion-item>
    </ion-reorder>
  </ion-reorder-group>
</template>

<script>
import {
  IonIcon,
  IonItem,
  IonLabel,
  IonReorder,
  IonReorderGroup,
} from "@ionic/vue";
import { pizza } from "ionicons/icons";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonIcon,
    IonItem,
    IonLabel,
    IonReorder,
    IonReorderGroup,
  },
  setup() {
    return { pizza };
  },
});
</script>

to add it.

ion-reorder is wrapped around the item we want to make draggable.

Search Bar

We can add a search bar with the ion-searchbar component.

For example, we can write:

<template>
  <ion-searchbar
    show-cancel-button="focus"
    cancel-button-text="Custom Cancel"
  ></ion-searchbar>
  <ion-searchbar debounce="500"></ion-searchbar>
  <ion-searchbar animated></ion-searchbar>
  <ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
  <ion-toolbar>
    <ion-searchbar></ion-searchbar>
  </ion-toolbar>
</template>

<script>
import { IonSearchbar, IonToolbar } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonSearchbar, IonToolbar },
});
</script>

The debounce prop sets the debounce.

show-cancel-button adds a cancel button to the search bar.

animated makes the search bar animated.

placeholder has the search bar placeholder.

We can also put search bars in a toolbar.

Also, we can set the type of the search bar:

<template>
  <ion-searchbar type="tel"></ion-searchbar>
</template>

<script>
import { IonSearchbar, IonToolbar } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonSearchbar, IonToolbar },
});
</script>

We set type to tel so that we let users enter phone numbers.

Conclusion

We can add pull to refresh, reorderable items and search bars with Ionic Vue.